<script setup>
import { ref, onMounted, computed } from 'vue'
import { getLabelListAPI, deleteLabelAPI, updateLabelAPI, addLabelAPI } from '@/api/wall'
import { useCommonStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { useInitTable } from '@/hooks/useTable'
const commonStore = useCommonStore()

// 处理响应结果
const handleSuccess = (result) => {
  tableData.value = result.map((item) => {
    item.btnLoading = false
    return item
  })
}
// 列表 | 分页 | 搜索 | 多选 | 删除
const tableOptions = {
  params: {
    name: null,
    wall_id: 0
  },
  getDataAPI: getLabelListAPI,
  deleteAPI: deleteLabelAPI,
  onSuccess: handleSuccess
}
const { params, tableData, tableLoading, getData, handleSearch, handleDelete } =
  useInitTable(tableOptions)

// 添加标签 | 修改标签
const addForm = ref({})
const formRef = ref(null)
const dialogVisible = ref(false)
const btnLoading = ref(false)
const addFormRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  wall_id: [{ required: true, message: '请选择墙', trigger: 'blur' }]
}
// 打开弹窗
const handleOpenDialog = (row) => {
  addForm.value = row
  formRef.value?.resetFields()
  dialogVisible.value = true
}
// 添加
const handleAdd = () => {
  handleOpenDialog({ name: '', wall_id: commonStore.wallList[0].id })
}
const isAdd = computed(() => !Boolean(addForm.value.id))
// 提交数据
const handleAddOrUpdate = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return
    btnLoading.value = true
    try {
      // 判断是添加或修改
      if (isAdd.value) {
        await addLabelAPI({ ...addForm.value })
      } else {
        await updateLabelAPI({ id: addForm.value.id, name: addForm.value.name })
      }
      ElMessage.success((isAdd.value ? '添加' : '编辑') + '成功')
      dialogVisible.value = false
      getData()
    } finally {
      btnLoading.value = false
    }
  })
}

onMounted(() => {
  commonStore.getWallList()
})
</script>

<template>
  <layout-card>
    <!-- 搜索区域 -->
    <el-form class="search-container" :model="params" inline>
      <el-form-item label="标签名称:">
        <el-input v-model="params.name" placeholder="请输入名称" style="width: 150px" clearable />
      </el-form-item>
      <el-form-item label="墙的类型:">
        <el-select class="select" v-model="params.wall_id" placeholder="选择墙的类型">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="item in commonStore.wallList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary" @click="handleSearch" icon="Search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <div class="handle-container">
      <el-button v-permission="'wall:label:createLabel'" type="primary" @click="handleAdd"
        >添加标签</el-button
      >
    </div>
    <!-- 表格区域 -->
    <el-table v-loading="tableLoading" :data="tableData">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column label="名称" prop="name" show-overflow-tooltip />
      <el-table-column label="墙的类型">
        <template #default="{ row }">
          <el-tag :type="row.wall.title === '留言墙' ? 'success' : 'primary'" effect="plain">{{
            row.wall.title
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="留言个数" prop="leaveword_count" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button
            v-permission="'wall:label:updateLabel'"
            type="primary"
            link
            @click="handleOpenDialog({ ...row })"
            >编辑</el-button
          >
          <el-popconfirm title="确定要删除此条标签吗？" @confirm="handleDelete(row)">
            <template #reference>
              <el-button
                v-permission="'wall:label:deleteLabel'"
                :loading="row.btnLoading"
                type="primary"
                link
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog
      :title="(isAdd ? '添加' : '编辑') + '标签'"
      v-model="dialogVisible"
      align-center
      width="420px"
    >
      <!-- 表单 -->
      <el-form
        class="dialog-form"
        ref="formRef"
        :model="addForm"
        :rules="addFormRules"
        label-width="65px"
      >
        <el-form-item v-if="isAdd" label="墙" prop="wall_id">
          <el-select v-model="addForm.wall_id" placeholder="选择墙的类型" style="width: 130px">
            <el-option
              v-for="item in commonStore.wallList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="btnLoading" type="primary" @click="handleAddOrUpdate">确 定</el-button>
      </template>
    </el-dialog>
  </layout-card>
</template>

<style lang="scss" scoped>
.search-container {
  .el-form-item {
    margin-bottom: 10px;
    .select {
      width: 130px;
    }
    &.search-btn {
      margin-right: 0;
    }
  }
}
.dialog-form {
  padding: 10px 10px 0;
}
</style>
